<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>图书推荐系统后端系统</title>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}
#wrap {
	height: 85%;
	width: 100;
	background-image: url(4.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	background: url("[[@{/}]]/static/images/login/login01.jpg");
}
#head {
	width: 100;
	height: 15%;
	background-color: #66CCCC;
	text-align: center;
	position: relative;
}
#foot {
	width: 100;
	height: 10%;
	background-color: #CC9933;
	position: relative;
}
#wrap .logGet {
	height: 70%;
	width: 368px;  
	position: absolute;
	background-color: #FFFFFF;
	top: 5%;
	right: 5%;
}
.logC a input {
	width: 100%;
	height: 45px;
	background-color: #ee7700;
	border: none;
	color: white;
	font-size: 18px;
	cursor: pointer;
}
.logGet .logD.logDtip .p1 {
	display: inline-block;
	font-size: 28px;
	margin-top: 30px;
	width: 86%;
}
#wrap .logGet .logD.logDtip {
	width: 86%;
	border-bottom: 1px solid #ee7700;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}
.logGet .lgD img {
	position: absolute;
	top: 12px;
	left: 8px;
}
.logGet .lgD input {
	width: 100%;
	height: 42px;
	text-indent: 2.5rem;
}
#wrap .logGet .lgD {
	width: 86%;
	position: relative;
	margin-bottom: 30px;
	margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
}
#wrap .logGet .logC {
	width: 86%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.title {
	font-family: "宋体";
	color: #FFFFFF;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
	font-size: 36px;
	width: 30%;
}
.copyright {
	font-family: "宋体";
	color: #FFFFFF;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
	height: 60px;
	text-align:center;
}
#foot .copyright .img {
	width: 100%;
	position: relative;
}
.copyright .img .icon {
	display: inline-block;
	width: 24px;
	margin-left: 22px;
	vertical-align: middle;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 5px;
}
#foot .copyright p {
	width: 100%;
}
</style>
</head>
<body id="mainBody">
<div class="header" id="head">
	<div class="title">图书推荐系统后端系统</div>
</div>
<div class="wrap" id="wrap">
	<div class="logGet">
		<!-- 头部提示信息 -->
		<div class="logD logDtip">
			<p class="p1">登录</p>
		</div>
		<p style="height: 20px; font-size: 18px; margin-left: 25px; padding-top: 10px; color: red;">{{errorMsg}}</p>
		<!-- 输入框 -->
		<div class="lgD">
			<img th:src="@{/static/images/login/user.png}" width="20" height="20" alt=""/>
			<input type="text" v-model="username"
				placeholder="输入用户名" />
		</div>
		<div class="lgD">
			<img th:src="@{/static/images/login/pwd.png}" width="20" height="20" alt=""/>
			<input type="password" v-model="password"
				placeholder="输入用户密码" />
		</div>
		<div style="padding-left: 25px;">
			<input style="width: 20px; height: 20px;" type="checkbox" v-model="userRole" value="1"/>是否管理员
		</div>
		<div class="logC">
			<a href="javascript:;" target="_self"><input type="button" value="登 录" @click="login"/></a>
		</div>
		<div style="text-align: center; margin-top: 5px;">
			<a th:href="@{/register}">新用户注册</a>
		</div>
	</div>
</div>
<span th:include="./commons/common-js.html :: commonOnLoadJs"></span>
</body>
<script type="text/javascript">
window.onload = function(){
	/*
	* 设置各个元素高度
	*/
	let height = window.innerHeight;
	let mainBodyDom = document.getElementById("mainBody");
	mainBodyDom.style.height = height + 'px';
}
const BASE_PATH = [[@{/}]];
var app = new Vue({
	el: '#wrap',
	data: {
		errorMsg: '',
		username: '',
		password: '',
		/*
		* 0: 普通用户
		* 1: 管理员
		*/
		userRole: 1
	},
	methods: {
		login: function() {
			let userRole = app.userRole;
			if (!app.userRole) {
				userRole = 0;
			}
			let loginData = {
				userName: app.username,
				password: app.password,
				userRole: userRole
			};
			axios.post(BASE_PATH+'/restful/login', loginData)
			.then(function (res) {
				data = res.data;
				if (data.code == 200) {
					let user = data.data;
					if (user.userRole == 1) {
						window.location.href = BASE_PATH+'/adminIndex';
					} else if (user.userRole == 0){
						window.location.href = BASE_PATH+'/userIndex';
					}
				} else {
					app.errorMsg = data.message;
				}
			}).catch(function (error) {
			});
		}
	}
});
</script>
</html>